<template>
  <!-- 添加商品分类 -->
  <CategoryAdd
    v-model:show="add.visible.value"
    :table-data="tableData.list"
    @refresh-table="initTable"
  ></CategoryAdd>

  <!-- 更新商品分类 -->
  <CategoryUpdate
    v-model:show="update.visible.value"
    :detail="shopGoodsCategoryDetail"
    @refresh-table="initTable"
  ></CategoryUpdate>

  <!-- 筛选 -->
  <category-filter
    :filter-data="filterData"
    @query="initTable"
  ></category-filter>

  <!-- 基于element-plus二次封装的表格组件 -->
  <cv-table
    v-model:current-page="testTable.pageConfig.page"
    :stripe="true"
    :is-show-page="false"
    :height="'auto'"
    :data="tableData.list"
    :config="tableColumn"
    :loading="testTable.loading.value"
    @add-data="add.setVisible(true)"
    @refresh="initTable"
  >
  </cv-table>
</template>

<script setup lang="ts">
import type { TableConfig, FormConfig } from '@/packages/components'
import { addReq, queryReq, updateReq, deleteReq } from '@/utils/http/code'
import { useAppStore } from '@/store'
import useVisible from '@/hooks/useVisible'
import CategoryFilter from './category-filter.vue'

import { useTable } from '@/hooks'
import { getApiBaseUrl } from '@/utils/common/env'
import {
  getShopGoodsCategoryTree,
  deleteCategory,
  getShopGoodsCategoryDetail,
  ShopGoodsCategory,
  ShopGoodsCategoryTree,
  updateShopGoodsCategory,
} from '@/api/goods/admin-catrgory'
import CategoryAdd from './category-add.vue'
import CategoryUpdate from './category-update.vue'

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const addDataService = (data: FormData, close: Function) => {
  console.log(data, '添加数据')
  //关闭弹窗
  //close()
}

/**
 * 表格编辑数据
 * @param row
 */
const shopGoodsCategoryDetail = ref<ShopGoodsCategory>()
const editHandle = async (row: ShopGoodsCategoryTree) => {
  const res = await getShopGoodsCategoryDetail(row.id)

  queryReq(res, () => {
    shopGoodsCategoryDetail.value = res.data
    update.setVisible(true)
  })
}
/**
 * 表格删除数据
 * @param row
 */
const deleteHandle = async (row: ShopGoodsCategoryTree) => {
  const res = await deleteCategory(row.id)
  deleteReq(res, () => {
    initTable()
  })
}

const testTable = useTable()

const add = useVisible()

const update = useVisible()

const h = ref(1000)

h.value = window.innerHeight

onresize = () => {
  h.value = window.innerHeight
}

const tableData = reactive({
  list: [] as ShopGoodsCategoryTree[],
})

const { permissionList } = useAppStore()

const tableColumn = reactive<TableConfig<ShopGoodsCategoryTree>>({
  permissionList,
  columns: [
    {
      type: 'txt',
      prop: 'categoryName',
      label: '名称',
    },

    {
      type: 'image',
      prop: 'image',
      label: '名称',
    },

    {
      type: 'tag',
      prop: 'state',
      label: '状态',
      tag: [{ 1: ['success', '启用'], 0: ['danger', '禁用'] }],
    },

    {
      type: 'switch',
      prop: 'homeReferral',
      label: '是否首页推荐',
      switch: [{ 1: ['success', '推荐'], 0: ['danger', '不推荐'] }],
      switchChange: async (row) => {
        const res = await updateShopGoodsCategory({
          id: row.id,
          homeReferral: row.homeReferral,
          state: row.state,
        })
      },
    },

    {
      type: 'txt',
      prop: 'sort',
      label: '排序',
    },
  ],

  action: [
    {
      type: 'edit',
      title: '编辑',
      auth: ['sys:user:update'],
      onClick: editHandle,
    },

    {
      type: 'other',
      title: '添加子分类',
      color: 'warning',
      auth: ['sys:user:delete'],
      isShow: (row) => {
        return row.rank != 3
      },
      onClick: () => {
        console.log(77777777)
      },
    },
    {
      type: 'del',
      title: '删除',
      auth: ['sys:user:delete'],
      onClick: async (row) => {
        const res = await deleteCategory(row.id)
        deleteReq(res, () => {
          initTable()
        })
      },
    },
    {
      type: 'slot',
      slotName: 'a',
      auth: ['sys:user:delete'],
      onClick: async (row) => {
        const res = await deleteCategory(row.id)
        deleteReq(res, () => {
          initTable()
        })
      },
    },
  ],
})

const filterData = reactive({
  categoryName: '',
})

/**
 * 加载表格数据
 */
const initTable = testTable.initTableData(async (c) => {
  console.log(filterData, 'filter')

  const res = await getShopGoodsCategoryTree()
  //检查查询请求是否成功

  queryReq(
    res,
    (data) => {
      tableData.list = data
      //关闭加载动画
      c.closeLoading()

      console.log(getApiBaseUrl())
    },
    () => {
      console.log(333333333)
    }
  )
})
initTable()
</script>
<style lang="scss" scoped></style>
